<template>
  <view class="list">
    <view class="item"
		v-for="item of items"
		:key="item.id">
      <view class="img">
        <image :src="item.logo" mode="aspectFill"></image>
      </view>

      <view class="txt">
		<view class="name"> {{item.name}} </view>
		<view class="distance"><template v-if="item.distance">{{item.distance}} <text> · </text></template>{{data.address}}</view>
      </view>

      <view class="btn" @click="handle(item)">选这个</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {
    handle({id,address,logo,distance,name}) {
		let cacheStoreList = uni.getStorageSync('cacheStoreList') || [],
			index = cacheStoreList.findIndex(el=>el.id === id);
		
		if(index !== -1){
			cacheStoreList.splice(index,1)
		}
		cacheStoreList.push({
			id,
			logo,
			distance,
			name,
			address
		})

		uni.setStorageSync('cacheStoreList', cacheStoreList);
		uni.removeStorageSync("storeMdData")
		uni.reLaunch({
			url:`/pages/home/home?store_id=${id}`
		})
    },

    stop() {
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  padding: 24rpx;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 24rpx 38rpx 24rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .img {
    width: 100rpx;
    height: 100rpx;

    image {
      display: block;
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
    padding: 0 20rpx;
    .name {
      padding: 12rpx 0;
      flex: 1;
      overflow: hidden;
      font-size: 26rpx;
      color: #191919;
      font-weight: bold;
    }

    .distance {
      font-size: 22rpx;
      color: #9f9f9f;
    }

    .name,
    .distance {
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.btn {
  width: 110rpx;
  height: 44rpx;
  line-height: 44rpx;
  border-radius: 32px;
  background: #f60313;
  color: #fff;
  text-align: center;
  font-size: 24rpx;
}
</style>
